<template>
  <!-- 使用vant组件Tab标签页，#title插槽用来自定义导航项的内容，包括小图标 -->
  <van-tabs
    v-model="active"
    animated
    line-width="17%"
    class="myVanTabs"
    background="rgb(15,15,15)"
    title-inactive-color="rgb(255,255,255)"
    title-active-color="rgb(255,208,0)"
    color="rgb(255,208,0)"
  >
    <van-tab to="/">
      <template #title>
        <i class="iconfont icon-tubiao-"></i><span>推荐音乐</span>
      </template>
    </van-tab>

    <van-tab to="/hot">
      <template #title>
        <i class="iconfont icon-regebang"></i><span>热歌榜</span>
      </template>
    </van-tab>

    <van-tab to="/musicHome">
      <template #title>
        <i class="iconfont icon-hongrenbang"></i><span>红人榜</span>
      </template>
    </van-tab>

    <van-tab to="/search">
      <template #title>
        <i class="iconfont icon-search"></i><span>搜索</span>
      </template>
    </van-tab>
  </van-tabs>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.myVanTabs {
  .van-tab {
    i{
      margin-right: 3px;
    }
    span {
      font-size: 15px;
    }
  }
}
// .topnav {
//   display: flex;
//   border-bottom: 1px solid #ccc;
//   li {
//     flex: 1;
//     text-align: center;
//     line-height: 40px;
//     border-right: 1px solid rgb(243, 240, 240);
//     &:last-of-type {
//       border-right: none;
//     }
//     a {
//       color: rgb(145, 70, 70);
//       display: inline-block;
//       text-decoration: none;
//       &.router-link-exact-active {
//         color: #dd001b;
//         border-bottom: 2px solid #ff001e;
//       }
//     }
//   }
// }
</style>